<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>高阶函数_函数柯里化</title>
</head>

<body>
<div id="test"></div>

<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
    class Login extends React.Component {

        //受控组件：值受到react控制的表单元素

        //初始化状态
        state = {
            username: '',
            password: ''
        }

        handleSubmit = (event) => {
            event.preventDefault()//阻止表单提交
            const {username, password} = this.state
            alert(username + password)
        }

        //保存表单数据到状态中
        saveFormData = (dataType,event) => {
                this.setState({[dataType]: event.target.value})
        }

        render() {
            return (
                <form onSubmit={this.handleSubmit}>
                    用户名： <input onChange={event=>this.saveFormData('username',event)} type="text" name="username"/>
                    密码: <input onChange={event=>this.saveFormData('password',event)} type="password" name="password"/>
                    <button>登录</button>
                </form>
            )
        }
    }

    ReactDOM.render(<Login/>, document.getElementById('test'))

</script>
</body>

</html>
